<template>
  <a-layout class="home">
    <a-layout-header class="header">
      <CommonHeader></CommonHeader>
    </a-layout-header>
    <a-layout class="content">
      <a-layout-sider class="aside" v-model:collapsed="isCollapse">
        <CommonAside></CommonAside>
      </a-layout-sider>
      <a-layout-content>
        <CommonTabs></CommonTabs>
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup>
import CommonHeader from '@/components/Layout/CommonHeader'
import CommonAside from "@/components/Layout/CommonAside"
import CommonTabs from "@/components/Layout/CommonTabs";
import {computed} from "vue";
import {useStore} from "vuex";
const store=useStore()
const isCollapse=computed(()=>{
  return store.state.menu.collapsed
})
</script>

<style scoped lang="scss">
.home{
  height: 100%;
  .header{
    background: #02529F;
    color: #FFFFFF;
    height: 48px;
  }
  .content{
    height: calc(100% - 48px);
    overflow-y: auto;
    .aside{
      background: #FFFFFF;
      width: 208px;
    }
  }
  .footer{
    text-align: center;
    font-size: 14px;
    color:rgba(0, 0, 0, 0.45);
  }

}
</style>